<template>
	<div id="book">
		<div id="main-first">
			<el-image :src="pic('')" style="width: 20%;" />
      <div style="width:40%">
        <el-input v-model="data.key" placeholder="请输入内容">
          <template #append>
            <el-button size="large" @click="findByKey"
                       style="background-color: red;color: white;border: 0;display: block;font-size: 16px;font-weight:bolder">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      <div style="width: 20%;">
        <el-button type="primary" size="large" style="background-color: red;border: 0;"
                   @click="myCart"><el-icon ><ShoppingCart /></el-icon>&nbsp;我的购物车</el-button>
      </div>
		</div>
		<p @click="ret">返回商品列表页</p>
		<br>
		<hr style="border: 1px solid red;">
		<br>
		<div style="display: flex;align-items: baseline">

			<div style="width: 40%;align-self: center;">
				<el-image :src="pic(data.book.pic)"
					style="width: 70%;padding: 20px;object-fit: cover;border: 1px solid #DCDFE6;"></el-image>
			</div>
			<div style="width: 30%;">
				<table class="book-table">
					<tr>
						<th colspan="2">{{ data.book.name }}</th>
					</tr>
					<tr>
						<td>类别:</td>
						<td>{{ data.book.type.name }}</td>
					</tr>
					<tr>
						<td>出版社:</td>
						<td>{{ data.book.maker }}</td>
					</tr>
					<tr>
						<td>作者:</td>
						<td>{{ data.book.author }}</td>
					</tr>
					<tr>
						<td>出版时间:</td>
						<td>{{ bookTmake() }}</td>
					</tr>
					<tr>
						<td>出版号:</td>
						<td>{{ data.book.sn }}</td>
					</tr>
					<tr>
						<td>价格:</td>
						<td>¥{{ data.book.price }}</td>
					</tr>
					<tr>
						<td>促销价:</td>
						<td>¥{{ data.book.price2 }}</td>
					</tr>
					<tr>
						<td>库存数:</td>
						<td>{{ data.book.stock }}</td>
					</tr>
					<tr>
						<td>销售量:</td>
						<td>{{ data.book.salenum }}</td>
					</tr>

					<tr>
						<td colspan="2" style="text-align: center;"><el-button type="danger" size="default"
								@click="goShopping(data.book.id)">
								<i class="el-icon-shopping-cart-full"></i>
								添加至购物车</el-button></td>
					</tr>
				</table>
			</div>
			<!-- 同类商品栏 -->
			<div id="main-second-body-salenum">
				<div
					style="text-align: center;height: 40px;line-height: 40px;background-color: red;color: white; border-top-left-radius: 10px; border-top-right-radius: 10px;">
					<p style="font-size: 18px;">同类商品推荐</p>
				</div>
				<br>
				<div class="salenum" v-for="i in data.relatedBooks" :key="i.id">
					<div style="width: 50px;height: auto;">
						<img :src="pic(i.pic)" width="50px" style="border-radius: 50%;" alt="商品图">
					</div>
					<div
						style="width: 70%;height: auto;display: flex;flex-direction: column;justify-content: space-around;">
						<div class="salenum-header">
							<p class="salenum-name" @click="findBook(i.id)">{{ i.name }}</p>
							<p class="salenum-price">￥{{ i.price }}</p>
						</div>
						<div class="salenum-bottom">
							<p class="salemun-master">{{ i.maker }}</p>
							<p class="salemun-author">{{ i.author }}</p>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="border-bottom: 1px solid red;height: 25px;">
			<h4 style="color: red;"><i class="el-icon-discount"></i>商品详情</h4>
		</div>
		<br>
		<div>
			<i class="el-icon-discover"></i>
			{{ data.book.info }}
		</div>
		<br>
		<div style="border-bottom: 1px solid lightblue;height: 25px;">
			<h4 style="color: lightblue;"><i class="el-icon-discount"></i>商品评价</h4>
		</div>
		<div id="comment">
			<el-avatar icon="el-icon-user-solid" size="large" shape="circle" :src="pic($store.state.user.img)"
				fit="fill"></el-avatar>
			<el-rate v-model="data.comment.rate"></el-rate>
			<el-input v-model="data.comment.content" placeholder="请输入评价" type="textarea" :rows="2" clearable
				style="width: 60%;" />
			<el-button type="success" size="medium" @click="postComment">发布</el-button>
		</div>
		<div v-for="i in data.comments">
			<div style="display: flex;align-items: center;justify-content: space-between;">
				<div style="height: 45px;display: flex;align-items: center;">
					<img :src="pic(i.img)" style="border-radius: 50%;width: 30px;height: 30px;margin:0px 20px;" alt="">
					<span style="color: #C0C4CC;">{{ i.nickname }}</span>
				</div>
				<div>
					<el-rate v-model="i.rate" disabled show-score text-color="#ff9900"></el-rate>
				</div>
			</div>
			<div style="display: flex;align-items: center;justify-content: space-between;">
				<div style="padding-left: 70px;">
					<span style="font-size: 0.8rem">{{ i.content }}</span>
				</div>
				<span style="color: #C0C4CC;">
					{{ dateT(i.tpost) }}
				</span>
			</div>
		</div>
		<br>
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from 'vue';
	import pic from "@/api/pic.js";
	import {
		useRoute
	} from 'vue-router';
	import {
		ElMessage
	} from 'element-plus';
	import api from '../../api';
	import router from '../../router';
  import store from "@/store";

	const data = reactive({
		key: '',
		book: {
			id: '',
			author: '',
			info: '',
			maker: '',
			type: {
				id: '',
				name: '',
				pid: '',
				prio: ''
			},
			name: '',
			pic: '',
			price: '',
			price2: '',
			salenum: '',
			sn: '',
			stock: '',
			tmake: new Date()
		},
		relatedBooks: [],
		comment: {
			bookid: '',
			rate: 0,
			content: ''
		},
		comments: []
	})

	const ret = () => {
		router.push('/info/books')
	}

  const myCart = () => {
    router.push('/info/shoppingcart')
  }

	const dateT = (str) => {
		let d = new Date(str)
		let year = d.getFullYear();
		let month = String(d.getMonth() + 1).padStart(2, '0');
		let day = String(d.getDate()).padStart(2, '0');
		return `${year}-${month}-${day}`;
	}

	const goShopping = (id) => {
		api.get(`/api/cart/add/${id}`).then((resp) => {
			let msg = resp.data.msg;
			ElMessage.success(msg)
		})
	}

	const postComment = () => {
		if (data.comment.rate === 0) {
			ElMessage.warning('请进行评分');
			return;
		}
		if (!data.comment.content.trim()) {
			ElMessage.warning('请输入评价内容');
			return;
		}
		console.dir('发布的评价信息：', data.comment);
		data.comment.bookid = data.book.id;
		api.postj("/api/comment/addComment", data.comment).then((resp) => {
			if(resp.data.code === 200){
        ElMessage.success(resp.data.msg)
        data.comments = resp.data.data
        return
      }
      ElMessage.warning(resp.data.msg)
		})
	}

  const findByKey = () => {
    store.state.key = data.key;
    store.state.page.show.curPage = 1
    router.push(`/info/books`)
  }

	const findBook = (bookid) => {
		api.get(`/api/public/book/findById/${bookid}`).then((resp) => {
			data.book = resp.data.data
		})
    api.get(`/api/public/comment/${bookid}`).then((resp) => {
      data.comments = resp.data.data
    })
	}

	const bookTmake = () => {
		const day = new Date(data.book.tmake)
		const y = day.getFullYear();
		const m = String(day.getMonth() + 1).padStart(2, '0');
		const d = String(day.getDate()).padStart(2, '0');
		return `${y}年${m}月${d}日`;
	}

	onMounted(() => {
		let bookid = useRoute().query.id
		api.get(`/api/public/book/findById/${bookid}`).then((resp) => {
			data.book = resp.data.data
			api.get(`api/public/book/findPage/1/6/${data.book.type.id}`).then((resp) => {
				data.relatedBooks = resp.data.data.books
			})
		})

		// 获取用户的评价
		api.get(`/api/public/comment/${bookid}`).then((resp) => {
			data.comments = resp.data.data
		})

	})
</script>


<style lang="less">
	#book {
		// 设置内边距全局布局
		padding-left: 12%;
		padding-right: 12%;

		#main-first {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		.book-table {
			border-collapse: collapse;
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
			font-family: Arial, sans-serif;

			td:nth-child(1) {
				width: 80px;
			}

			th {
				font-size: 18px;
				font-weight: bold;
				text-align: center;
			}

			th,
			td {
				padding: 10px;
				text-align: left;
			}

		}

		//同类款
		#main-second-body-salenum {
			width: 28%;
			border: 1px solid red;
			border-radius: 10px;
			display: flex;
			flex-direction: column;

			.salenum {

				display: flex;
				flex-direction: row;
				justify-content: space-evenly;

				//热度书籍之图书名及价格
				.salenum-header {
					display: flex;
					width: 90%;

					.salenum-name {
						width: 90%;
						display: -webkit-box;
						/* 将元素设置为弹性伸缩盒子模型 */
						-webkit-box-orient: vertical;
						line-clamp: 1;
						/* 限制显示的行数为 1 行*/
						overflow: hidden;
						/* 隐藏超出部分的内容 */
						text-overflow: ellipsis;
						/* 超出部分用省略号表示 */
						font-size: 14px;
						font-weight: 700;
						margin: 0;

					}

					.salenum-name:hover {
						color: red;
						cursor: pointer;
					}

					.salenum-price {
						font-size: 12px;
						font-weight: 600;
						margin: 0;
					}
				}

				//热度书籍之图书出版作者及操作
				.salenum-bottom {
					width: 90%;
					display: flex;
					justify-content: space-between;

					p {
						font-size: 12px;
						margin: 0;
						white-space: nowrap; //不允许换行
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //隐藏部分省略代替
					}

					.salemun-operate:hover {
						background-color: rgb(197, 2, 2);
						cursor: pointer;
					}
				}

			}
		}

		#comment {

			border-bottom: 1px solid lightblue;
			padding: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			/* 针对 el-input 的 textarea 部分设置样式 */
			.el-textarea__inner {
				/* 强制高度为 25px */
				height: 60px !important;
				/* 当内容超出时显示垂直滚动条 */
				overflow-y: auto;
				/* 隐藏滚动条 */
				/* 不允许用户手动调整 textarea 大小 */
				resize: none;
			}
		}
	}
</style>